<template>
    <div class="header-container">
        <div class="user">
            <div class="image">
                <img :src="articleContent.avatar">
            </div>
            <span>{{ articleContent.username }}</span>
        </div>

        <div class="icon">
            <i class="iconfont icon-shijian"></i>
            <span>发表于</span><span>{{ articleContent.createTime }}</span>
        </div>

        <div class="icon">
            <i class="iconfont icon-pinglun"></i>
            <span>45</span>
        </div>

        <div class="icon">
            <i class="iconfont icon-collect"></i>
            <span>65</span>
        </div>

        <div class="icon">
            <i class="iconfont icon-eye"></i>
            <span>{{ articleContent.viewCount }}</span>
        </div>
    </div>
    <div class="typo">
        <MdPreview :modelValue="articleContent.content" />
    </div>
</template>

<script setup>
import { useArticleStore } from '@/store/Article/index.js'
import { MdPreview } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import { computed, ref, watch } from 'vue';

let articleContent = ref()
const initarticle = () => {
    articleContent.value = useArticleStore().articleValue
}

watch(
    () => useArticleStore().articleValue,
    () => {
        initarticle()
    }, { deep: true, immediate: true })
</script>


<style lang="scss" scoped>
.header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    background: #eee;
    padding: 1rem 2rem;
    border-bottom: .1rem #222 solid;
}

.user {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 1rem;
}

.user .image {
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
}

.image img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.header-container .icon {
    font-size: 1.8rem;
    text-align: center;
    align-items: center;
    cursor: pointer;
    color: #777;
}

.header-container i {
    display: inline;
    font-size: 1.8rem;
    color: #777;
}

.header-container span {
    font-size: 1.8rem;
    color: #777;
    margin-left: .5rem;
}


:deep(div.default-theme p) {
    line-height: 2.4;
    padding: 1rem 0;
    font-size: 1.6rem;
}

:deep(div.default-theme img) {
    height: 100%;
    width: 100%;
}

:deep(.default-theme code) {
    max-width: 100%; // 使代码块不会超出容器宽度
    overflow-x: auto; // 如果代码行过长，允许水平滚动
    white-space: pre-wrap; // 保持代码格式，允许自动换行
    word-wrap: break-word; // 长单词或URL会在边界内换行
    line-height: 1.6; // 适当的行高，提高可读性
}

:deep(.default-theme pre) {
    max-width: 100%; // 确保<pre>元素也不会超出容器宽度
    overflow: auto; // 如果<pre>内容过宽，添加滚动条
    padding: 1em; // 增加内边距，使代码块看起来更整洁
    background: #f5f5f5; // 背景色，改为你喜欢的颜色
    border-radius: 10px; // 圆角边框
}

:deep(.md-editor-preview-wrapper) {
    padding: 0;
}
</style>